<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>大数据计算平台 - 数据集分组</title>
  <meta name="description" content="">
  <meta name="keywords" content="index">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="icon" type="image/png" th:href="@{/assets/i/favicon.png}">
  <link rel="apple-touch-icon-precomposed" th:href="@{/assets/i/app-icon72x72@2x.png}">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <script th:src="@{/assets/js/echarts.min.js}"></script>
  <link rel="stylesheet" th:href="@{/assets/css/amazeui.min.css}"/>
  <link rel="stylesheet" th:href="@{/assets/css/amazeui.datatables.min.css}"/>
  <link rel="stylesheet" th:href="@{/assets/css/app.css}">
  <script th:src="@{/assets/js/jquery.min.js}"></script>

</head>

<body data-type="widgets">
<script th:src="@{/assets/js/theme.js}"></script>

<div class="am-g tpl-g">
  <!-- 头部 -->
  <div th:include="header.html"></div>

  <!-- 风格切换 -->
  <div th:include="style.html"></div>

  <!-- 侧边导航栏 -->
  <div th:include="left-sidebar.html"></div>

  <!-- 内容区域 -->
  <div class="tpl-content-wrapper">
    <div class="row-content am-cf">
      <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
          <div class="widget am-cf">
            <div class="widget-head am-cf">
              <div class="widget-title  am-cf">数据集分组管理</div>
            </div>
            <div class="widget-body  am-fr">

              <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                <div class="am-form-group">
                  <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                      <button type="button" class="am-btn am-btn-default am-btn-success" id="add-btn"><span class="am-icon-plus"></span> 新增</button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="am-u-sm-12">
                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
                  <thead>
                  <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody id="table-data">
                    <tr th:each="dataGroup,iterStat : ${dataGroups}" th:classappend="${iterStat.odd} ? 'gradeX' : 'even gradeC'" th:attr="data-id=${dataGroup.id}">
                      <td th:text="${dataGroup.id}"></td>
                      <td th:text="${dataGroup.groupName}"></td>
                      <td>
                        <div class="tpl-table-black-operation">
                          <a href="javascript:;" th:attr="data-id=${dataGroup.id}" approach="edit">
                            <i class="am-icon-pencil"></i> 编辑
                          </a>
                          <a href="javascript:;" class="tpl-table-black-operation-del" th:attr="data-id=${dataGroup.id}"  approach="delete">
                            <i class="am-icon-trash"></i> 删除
                          </a>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <!-- 分页 -->
              <!--<div class="am-u-lg-12 am-cf">-->
                <!--<div class="am-fr">-->
                  <!--<ul class="am-pagination tpl-pagination">-->
                    <!--<li class="am-disabled"><a href="#">«</a></li>-->
                    <!--<li class="am-active"><a href="#">1</a></li>-->
                    <!--<li><a href="#">2</a></li>-->
                    <!--<li><a href="#">3</a></li>-->
                    <!--<li><a href="#">4</a></li>-->
                    <!--<li><a href="#">5</a></li>-->
                    <!--<li><a href="#">»</a></li>-->
                  <!--</ul>-->
                <!--</div>-->
              <!--</div>-->

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">数据源分组管理</div>
    <div class="am-modal-bd">
      请输入数据源分组名称：
      <input type="text" class="am-modal-prompt-input">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>提交</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">数据源分组管理</div>
    <div class="am-modal-bd">
      确定要删除这条记录吗？
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">提示消息</div>
    <div class="am-modal-bd">
      <span id="msg"></span>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<script th:src="@{/assets/js/amazeui.min.js}"></script>
<script th:src="@{/assets/js/amazeui.datatables.min.js}"></script>
<script th:src="@{/assets/js/dataTables.responsive.min.js}"></script>
<script th:src="@{/assets/js/app.js}"></script>

<script type="text/javascript">
  $(function () {
    var id = 0;
    var alertModel = $("#my-alert");
    var msgSpan = $("#msg");

    // 添加
    $("#add-btn").click(function () {
      $('#my-prompt').modal({
        relatedTarget: this,
        onConfirm: function(e) {
          var newName = e.data;
          if(!newName || newName === '') {
            showAlert("名称不能为空");
            return;
          }
          $.ajax({
            url: "/dataGroup/add",
            method: "post",
            data: {
              dataGroupName: newName
            },
            success: function (res) {
              if(res.code === 1001) {
                showAlert("添加成功")
              } else {
                showAlert(res.msg);
              }
            }
          })
        },
        onCancel: function(e) {
        }
      });
    });

    // 操作
    $("#table-data").on("click", "a[approach]", function () {
      var approach = $(this)[0].getAttribute("approach");
      id = $(this)[0].getAttribute("data-id");
      console.log(approach + " => " + id);
      if(approach === "edit") {
        $('#my-prompt').modal({
          relatedTarget: this,
          onConfirm: function(e) {
            var newName = e.data;
            if(!newName || newName === '') {
              showAlert("新名称不能为空");
              return;
            }
            $.ajax({
              url: "/dataGroup/update",
              method: "post",
              data: {
                dataGroupId: id,
                dataGroupName: newName
              },
              success: function (res) {
                if(res.code === 1001) {
                  showAlert("修改成功")
                } else {
                  showAlert(res.msg);
                }
              }
            })
          },
          onCancel: function(e) {
          }
        });
      } else if(approach === "delete") {
        $('#my-confirm').modal({
          relatedTarget: this,
          onConfirm: function(options) {
            // 发送删除请求
            $.ajax({
              url: "/dataGroup/delete",
              method: "post",
              data: {
                dataGroupId: id
              },
              success: function (res) {
                if(res.code === 1001) {
                  $("tr[data-id=" + id + "]")[0].remove();
                } else {
                  showAlert(res.msg);
                }
              },
              error: function (res) {
                showAlert("请求出现问题");
              }
            });
          },
          // closeOnConfirm: false,
          onCancel: function() {
            console.log("取消了")
          }
        });
      }
    });

    function showAlert(msg) {
      msgSpan.html(msg);
      alertModel.modal();
    }
  });
</script>

</body>

</html>